<template>
  <view>
    <view class="topMain">
      <view style="background-color: #fff; padding: 0 32rpx" :style="{ height: navHeight + 'px' }">
        <view class="header" :style="{ paddingTop: customTop + 'px', paddingRight: customRight + 'px' }">
          <image @click="goMsgFn" src="@/static/home/msg.png" mode="scaleToFill" />
          <view class="searchBox" @click="goPage('/pages/home/searchPage')">
            <u-input placeholder="搜索内容" readonly border="none" shape="circle" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #A8A8A8"></u-input>
          </view>
        </view>
      </view>
      <view class="tabList">
        <view class="left">
          <view class="active">推荐</view>
          <view>敬请期待</view>
        </view>
        <view class="right" @click="goPage('/pages/myPage/InviteFriends')"><image src="../../static/home/zyj.png" mode="scaleToFill" />赚佣金</view>
      </view>
    </view>
    <u-swiper keyName="image" :list="bannerList" indicator height="170" img-mode="scaleToFill" @click="swiperClick"></u-swiper>
    <view class="mpBox">
      <view class="mpHeader">
        <view class="title">我的名片</view>
        <view class="numBox">
          <view class="num">
            看过我
            <view v-for="(item, index) in viewedCount" :key="index" class="tag">{{ item }}</view>
          </view>
          <view class="num">
            影响力
            <view v-for="(item, index) in influence" :key="index" class="tag">{{ item }}</view>
          </view>
        </view>
      </view>
      <view class="mpList">
        <view class="item" @click="goPage('/pages/home/networkSquare')">
          <image src="../../static/home/rmgc.png" mode="scaleToFill" />
          <view>人脉广场</view>
        </view>
        <view class="item" @click="goPage('/pages/home/factoryRecommendation')">
          <image src="../../static/home/gctj.png" mode="scaleToFill" />
          <view>工厂推荐</view>
        </view>
        <view class="item" @click="goPage('/pages/myPage/myPosts/myPosts')">
          <image src="../../static/home/wdtz.png" mode="scaleToFill" />
          <view>我的帖子</view>
        </view>
        <view class="item" @click="goPage('/pages/myPage/activateMembership')">
          <image src="../../static/home/hyfl.png" mode="scaleToFill" />
          <view>会员福利</view>
        </view>
        <view class="item" @click="goPage('/pages/myPage/myPromotion')">
          <image src="../../static/home/tgzs.png" mode="scaleToFill" />
          <view>推广助手</view>
        </view>
      </view>
    </view>
    <view class="main">
      <CommonTitle title="热门动态" />
      <view style="margin-top: 24rpx">
        <template v-if="list.length > 0">
          <TrendsItem v-for="(item, index) in list" :key="index" :info="item"> </TrendsItem>
          <u-loadmore height="30" :status="status" />
        </template>
        <view v-else style="width: 100%; display: flex; justify-content: center; margin-top: 15rpx">
          <u-empty mode="list"></u-empty>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import CommonTitle from "@/components/commonTitle.vue";
import TrendsItem from "@/components/trendsItem.vue";
import { getTopHeight, goPage, loginFn } from "@/utils/commonFn";
import { getByType } from "@/api/my";
import { getBaseData, getMainPostList } from "@/api/home";
//@ts-ignore
import { onReachBottom, onShow } from "@dcloudio/uni-app";
const { navHeight, customTop, customRight } = getTopHeight();

const bannerList = ref();
const influence = ref("00");
const viewedCount = ref("00");
onMounted(async () => {
  uni.showLoading({
    title: "加载中",
  });
  const res = await getByType({ type: "1" });
  bannerList.value = res.data;

  getList();
});
onShow(async () => {
  influence.value = "00";
  viewedCount.value = "00";
  const res1 = await getBaseData();
  influence.value = res1.data.influence + "";
  viewedCount.value = res1.data.viewedCount + "";
  if (res1.data.influence < 10) {
    influence.value = "0" + res1.data.influence;
  }
  if (res1.data.viewedCount < 10) {
    viewedCount.value = "0" + res1.data.viewedCount;
  }
  if (res1.data.influence >= 999) {
    influence.value = "999";
  }
  if (res1.data.viewedCount >= 999) {
    viewedCount.value = "999";
  }
});
const formData = ref({
  pageNum: 1,
  pageSize: 10,
});
const swiperClick = (e: number) => {
  goPage(`/pages/message/newsDetails?id=${bannerList.value[e].id}`);
};
const goMsgFn = () => {
  uni.switchTab({
    url: "/pages/message/message",
  });
};
const status = ref("loadmore");
const list = ref<myTypes.myPostList[]>([]);
const getList = async () => {
  if (status.value == "nomore") {
    return;
  }
  status.value = "loadmore";
  const res = await getMainPostList(formData.value);
  list.value = list.value.concat(res?.rows);

  if (list.value.length >= (res?.total as number)) {
    status.value = "nomore";
  } else {
    status.value = "loadmore";
  }
  uni.hideLoading();
};
onReachBottom(() => {
  formData.value.pageNum++;
  getList();
});
</script>

<style scoped lang="less">
.header {
  width: 100%;
  display: flex;
  align-items: center;
  image {
    width: 64rpx;
    height: 64rpx;
    background: #f7f8fa;
    border-radius: 32rpx;
    margin-right: 30rpx;
  }
  .searchBox {
    /deep/ .u-input {
      background: #f7f8fa;
      padding: 8rpx 12rpx !important;
      margin-right: 10rpx;
    }
  }
}
.topMain {
  overflow: hidden;
  background: #fff;
  .tabList {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx 32rpx;
    .left {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #bebebe;
      line-height: 40rpx;
      .active {
        font-size: 36rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #1e1e1e;
        line-height: 50rpx;
        position: relative;
        margin-right: 48rpx;
        &::after {
          content: "";
          position: absolute;
          left: 8rpx;
          bottom: -6rpx;
          width: 56rpx;
          height: 8rpx;
          background: linear-gradient(90deg, rgba(66, 110, 254, 0.5) 0%, #426efe 100%);
        }
      }
    }
    .right {
      padding: 4rpx 12rpx;
      background: #fef1d3;
      border-radius: 26rpx;
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-family: YouSheBiaoTiHei;
      font-weight: bold;
      color: #ff6c01;
      line-height: 42rpx;
      image {
        width: 48rpx;
        height: 48rpx;
        margin-right: 6rpx;
      }
    }
  }
}
.mpBox {
  padding: 32rpx;
  background: #fff;
  .mpHeader {
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #1e1e1e;
      line-height: 44rpx;
    }
    .numBox {
      display: flex;
      align-items: center;
      font-size: 26rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 36rpx;
      .num {
        display: flex;
        align-items: center;
        margin-right: 40rpx;
        .tag {
          background: #f2f4f5;
          border-radius: 2rpx;
          font-size: 32rpx;
          font-family: DINPro, DINPro;
          font-weight: bold;
          color: #333333;
          line-height: 42rpx;
          padding: 6rpx;
          margin: 0 4rpx;
        }
        &:last-of-type {
          margin-right: 0rpx;
        }
      }
    }
  }
  .mpList {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32rpx;
    .item {
      text-align: center;
      font-size: 24rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 34rpx;
      image {
        width: 72rpx;
        height: 72rpx;
        margin-bottom: 8rpx;
      }
    }
  }
}
</style>
